<template>
  <q-tr v-show="menu.parent.expand">
    <q-td key="index" :props="props" :auto-width="true">
      <q-btn
        dense
        round
        flat
        v-if="menu.children"
        :icon="menu.expand ? 'mdi-minus' : 'mdi-plus'"
        @click="toggleExpand(menu)"
      />
    </q-td>
    <q-td ><div :style="paddingLeft">{{ menu.name }}</div></q-td>
    <q-td :auto-width="true" key="icon" :props="props">
      <q-icon :name="menu.icon" size="sm" :color="menu.iconColor?menu.iconColor:'t-grey'"/>
    </q-td>
    <q-td :auto-width="true">{{getDictLabel(menuType,menu.menuType)}}</q-td>
    <q-td class="ellipsis url-class" key="url">
      <div class="text-left" style="white-space: normal;">{{ menu.url }}</div>
    </q-td>
    <q-td key="showPc" :auto-width="true">
      <q-badge rounded class="cursor-pointer" :color="menu.showPc?'blue':'grey'" :label="menu.showPc?'是':'否'" @click="changeStatus(props.row,'pc')" />
    </q-td>
    <q-td key="showPhone" :auto-width="true">
      <q-badge rounded class="cursor-pointer" :color="menu.showPhone?'blue':'grey'" :label="menu.showPhone?'是':'否'" @click="changeStatus(props.row,'phone')" />
    </q-td>
    <q-td key="sortNo" :props="props" :auto-width="true">{{ menu.sortNo }}</q-td>
    <q-td key="opt" :props="props" :auto-width="true">
        <cc-btn label="编辑" color="primary" icon="edit" @click="edit(props.row)"> <q-tooltip>编辑</q-tooltip></cc-btn>
        <cc-btn label="添加" color="primary" icon="add" @click.stop="addChild(menu)" v-if="menu.menuType!==2"> <q-tooltip>添加</q-tooltip></cc-btn>
        <cc-btn label="按钮" color="primary"  icon="mdi-hospital-box" @click.stop="addChild(menu,2)" v-if="menu.menuType!==2"> <q-tooltip>添加</q-tooltip></cc-btn>
      <btn-del label="删除" @confirm="del(menu)" />
    </q-td>
  </q-tr>
</template>

<script>
import { getter, formatter, getDictLabel } from 'boot/dictionary';

export default {
  name: 'menu-item',
  components: {},
  props: {
    menu: {
      type: Object,
      required: true,
    },
    props: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      menuType: formatter('menuType'),
      icons: getter('icon'),
    };
  },
  watch: {},
  computed: {
    paddingLeft() {
      if (this.menu.level > 1) {
        return {
          paddingLeft: `${(this.menu.level - 1) * 40}px`,
        };
      }
      return {};
    },
  },
  methods: {
    addChild(menu, menuType = 1) {
      this.$emit('addChild', menu, menuType);
    },
    edit(menu) {
      this.$emit('edit', menu);
    },
    del(menu) {
      this.$emit('del', menu);
    },
    getDictLabel,
    toggleExpand(menu) {
      this.$emit('toggleExpand', menu);
    },
    changeStatus(row, type) {
      if (type === 'pc') {
        row.showPc = !row.showPc;
      } else {
        row.showPhone = !row.showPhone;
      }
      this.$axios.put('/sys/permission/edit', row)
        .then((r) => {
          this.$info(r.message);
        }).finally(() => {
          this.$emit('query');
        });
    },
  },
  created() { },
  mounted() {

  },
};
</script>
<style lang="stylus">
.url-class
  width 350px
</style>
